<template>
    <div class="arrow-container">
      <el-icon
        class="arrow"
        v-for="index in 3"
        :key="index"
        :class="isHighRef ? 'up-arrow' : 'down-arrow'"
      >
        <div class="arrow-wrapper">
          <CaretBottom />
        </div>
      </el-icon>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { CaretBottom } from '@element-plus/icons-vue'; // 导入 Element Plus 图标
  import { ref, toRef } from 'vue'; // 导入 ref 函数
  let isHigh = defineProps({ isHigh: Boolean }); // 定义一个 props 参数 isHigh
  let isHighRef = toRef(isHigh, 'isHigh');
//   let high = ref(true); // 控制箭头方向
  </script>
  
  <style scoped>
  .arrow-container {
    position: relative;
    top: 15%;
    width: 40%;
    height: 45%;
    display: flex;
    flex-direction: column; /* 使用列方向排列箭头 */
    justify-content: space-around; /* 均匀排列箭头 */
    align-items: center; /* 居中对齐 */
  }
  
  .arrow-wrapper {
    display: inline-block;
    width: 100%;
    height: 100%;
  }
  
  /* 亮暗变化效果，只调整透明度 */
  @keyframes brightness-toggle {
    0%, 20% {
      opacity: 1; /* 高亮状态 */
    }
    21%, 100% {
      opacity: 0.3; /* 暗色状态 */
    }
  }
  
  /* 向上箭头时，旋转箭头 */
  .up-arrow .arrow-wrapper {
    transform: rotate(180deg); /* 旋转箭头使其指向上方 */
  }
  
  /* 向下箭头时，保持默认方向 */
  .down-arrow .arrow-wrapper {
    transform: rotate(0deg); /* 保持原始方向 */
  }
  
  /* 设置亮暗的变化动画，基于透明度 */
  .arrow .arrow-wrapper {
    animation: brightness-toggle 1.5s linear infinite;
  }
  
  /* 当为向下箭头时，颜色从上到下变化 */
  .down-arrow:nth-child(1) .arrow-wrapper {
    animation-delay: 0s; /* 第1个箭头最先亮 */
  }
  
  .down-arrow:nth-child(2) .arrow-wrapper {
    animation-delay: 0.5s; /* 第2个箭头延迟 0.5 秒 */
  }
  
  .down-arrow:nth-child(3) .arrow-wrapper {
    animation-delay: 1s; /* 第3个箭头延迟 1 秒 */
  }
  
  /* 当为向上箭头时，颜色从下到上变化 */
  .up-arrow:nth-child(1) .arrow-wrapper {
    animation-delay: 1s; /* 第1个箭头最迟亮 */
  }
  
  .up-arrow:nth-child(2) .arrow-wrapper {
    animation-delay: 0.5s; /* 第2个箭头延迟 0.5 秒 */
  }
  
  .up-arrow:nth-child(3) .arrow-wrapper {
    animation-delay: 0s; /* 第3个箭头最先亮 */
  }
  
  .arrow {
    font-size: 125%; /* 调整图标大小 */
    position: relative;
  }
  </style>
  